<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>叮叮书店</title>
    <link href="../CSS/style.css" rel="stylesheet" type="text/css">
    <meta name="author" content="郭富帅">
    <meta name="keywords" content="叮叮书店，书店，图书">
    <meta name="description" content="叮叮书店是一个销售书籍的网上书店">
    <meta name="robots" content="index,follow">
    <script type="text/javascript" src="../JS/main.js"></script>;
<body>
<div id="adv1"><a href="#"><img src="../sourcebook/adv1.gif" alt="广告"></a></div>
<div id="close1"><img src="../sourcebook/close1.jpg"></div>
<div id="advr"><a href="#"><img src="../sourcebook/adv1.gif" alt="广告"></a></div>
<div id="closer"><img src="../sourcebook/close1.jpg"></div>
<!--页眉-->
<div id="header-wrapper">
    <!--网站logo-->
    <header class="container" id="advaddr">
       <div id="logo">
           <a href="index.html"><h1>叮叮书店</h1></a>
       </div>
        <div id="search">
            <form action="index.html" method="get">
                <input type="search" placeholder="站内搜索" ><input type="submit" value="搜索">
            </form>
        </div>
    </header>
    <!--导航菜单-->
    <div id="nav">
        <nav class="container">
            <ul>
                <li><a href="index.html">首页</a></li><li class="delay"><a href="category.html">书籍分类</a>
                <ul>
                    <li><a href="#">编程语言</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">图形图像</a></li>
                </ul></li><li><a href="specials.html">特刊降价</a></li><li><a href="contact.html">联系我们</a></li><li><a href="about.html">关于我们</a></li>
            </ul>
            <div id="displaydate"></div>
            <div id="displaytime"></div>
            <div id="menu-logo">
                <a href="cart.html">购物车</a>
            </div>
        </nav>
    </div>
</div>
<!--内容-->
<div id="content-wrapper" class="container">
    <!--左边内容区-->
    <article>
        <!--图片切换广告-->
        <div id="adv">
            <dl>
                <dt>
                    <a href="#" id="a1">1</a>
                    <a href="#" id="a2">2</a>
                    <a href="#" id="a3">3</a>
                    <a href="#" id="a4">4</a>
                </dt>
                <dd><a href="#"><img src="../sourcebook/b-ad1.jpg" id="badimg" alt="广告"></a></dd>
            </dl>
        </div>
        <!--本周推荐-->
        <section>
            <div>
                <h2 id="title1"> 本周推荐</h2>
            </div>
            <section class="recommend">
                <h3>HTML《权威指南》</h3><a href="#"><img src="../sourcebook/prod2.jpg" alt="HTML5权威指南"></a><div class="recommend-content">
                    <p>
                        作为下一代web标准，<mark>HTML5</mark>致力于为互联网开发者搭建更加便捷、
                        开放的沟通平台。业界普遍认为，在未来几年内，<mark>HTML5</mark>无疑将成为
                        移动互联网领域的主宰者
                    </p>
                    <p>
                        Adam Freeman,曾在多家企业担任高级职务，现为畅销技术图书作家，作有多部作品，他编写了许多畅销的编程书籍。
                        在为像Netscape、Microsystems和NASDAQ股票交易所等知名公司工作期间，他还开发过不少最具复杂性和创新性的项目
                    </p>
                </div>
                <div class="cartmore"><a class="cart" href="cart.html">加入购物车</a><a class="more" href="details.html">详细内容</a></div>
            </section>
            <section class="recommend">
                <h3>《JavaScript 权威指南》</h3><a href="#"><img src="../sourcebook/prod3.jpg" alt="JavaScript 权威指南"/></a><div class="recommend-content">
                    <p>
                        《JavaScript权威指南》是2007年机械工业出版社出版的图书，作者是弗拉纳根（David Flanagan，美）。
                        本书全面介绍了JavaScript语言的核心，以及Web浏览器中实现的遗留和标准的DOM。
                    </p>
                    <p>
                        David Flanagan是一名程序员，也是一名作家，它的个人网站是http://davidflanagan.com。
                        他在O'Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby Programming Language》，
                        以及《Java in a Nutshell》。David毕业于麻生理工学院，获得计算机科学与工程学位。
                        他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。
                    </p>
                </div>
                <div class="cartmore"><a class="cart" href="cart.html">加入购物车</a><a class="more" href="details.html">详细内容</a></div>
            </section>
        </section>
        <!--最近新书-->
        <section class="article-section">
                <h2 id="title2">最近新书</h2>
                <section>
                    <h3>《HTML5+CSS3从入门到精通》</h3>
                    <div class="effect-1">
                        <div class="image-box">
                            <img src="../sourcebook/prod4.jpg" alt="HTML5+CSS3从入门到精通"/>
                        </div>
                        <div class="text-desc">
                            <h3>《HTML5+CSS3从入门到精通》</h3>
                            <p>
                                web前端的学习，可以由<mark>HTML5</mark>+css、javascript+jquery、<mark>HTML5</mark>+CSS3的学习路线，
                                为此专门建立了一个学习的平台，web前端前面的数字是五一四
                            </p>
                            <div><a class="btn" href="cart.html">加入购物车</a> <a class="btn" href="details.html">详细内容</a> </div>
                        </div>
                    </div>
            </section>
            <section>
                <h3>《响应式web设计》</h3>
                <div class="effect-1">
                    <div class="image-box">
                       <img src="../sourcebook/prod5.jpg" alt="响应式web设计"/>
                    </div>
                    <div class="text-desc">
                        <h3>《响应式web设计》</h3>
                        <p>
                            web前端的学习，可以由<mark>HTML5</mark>+css、javascript+jquery、<mark>HTML5</mark>+CSS3的学习路线，
                            为此专门建立了一个学习的平台，web前端前面的数字是五一四，HTML5中间是一六七，
                            css3最后是六七八
                        </p>
                        <div><a class="btn" href="cart.html">加入购物车</a> <a class="btn" href="details.html">详细内容</a> </div>
                    </div>
                </div>
            </section>
        </section>
        <!--最近促销-->
        <section class="article-section">
            <h2 id="title3">最近促销</h2>
            <section>
                <h3>《HTML5和CSS3实例教程》</h3>
                <a href="#"><img class="promotion" src="../sourcebook/prod1.jpg" alt="HTML5和CSS3实例教程"/></a>
                <div><a class="cart" href="cart.html">加入购物车</a> <a class="more" href="details.html">详细内容</a></div>
            </section>
            <section>
                <h3>《JavaScript 权威指南》</h3>
                <a href="#"><img class="promotion" src="../sourcebook/prod3.jpg" alt="JavaScript 权威指南"/></a>
                <div><a class="cart" href="cart.html">加入购物车</a> <a class="more" href="details.html">详细内容</a></div>
            </section>
        </section>
    </article><!--右边边栏区--><aside>
        <!--广告区-->
        <section id="advert">
            <a href="#"><img src="../sourcebook/ad1.jpg" alt="广告"></a>
            <a href="#"><img src="../sourcebook/ad2.jpg" alt="广告"></a>
            <a href="#"><img src="../sourcebook/ad3.jpg" alt="广告"></a>
        </section>
        <div class="border"><img src="../sourcebook/border.gif" alt="分隔线"></div>
        <!--畅销图书-->
        <section id="best-selling">
            <h2 id="title7">畅销图书</h2>
            <ul>
                <li>
                    <a class="selling" href="#">查令十字街84号</a>
                    <div class="curr">
                        <div class="p-img">
                            <a title="查令十字街84号" href="#"><img width="80" height="80" src="../sourcebook/selling1.jpg"></a>
                        </div>
                        <div class="p-name">
                            <a title="查令十字街84号"  href="#">查令十字街84号</a>
                            <strong>¥43.50</strong>
                            <del>¥52.00</del>
                        </div>
                    </div>
                </li>
                <li>
                    <a class="selling" href="#">分享经济 供给侧改革的新经济方案</a>
                    <div class="curr">
                        <div class="p-img">
                            <a title="分享经济 供给侧改革的新经济方案" href="#"><img width="80" height="80" src="../sourcebook/selling2.jpg"/></a>
                        </div>
                        <div class="p-name">
                            <a title="分享经济 供给侧改革的新经济方案" href="#">分享经济 供给侧改革的新经济方案</a>
                            <strong>¥43.50</strong>
                            <del>¥52.00</del>
                        </div>
                    </div>
                </li>
            </ul>
        </section>
        <div class="border"><img src="../sourcebook/border.gif" alt="分隔线"></div>
        <!--图书分类-->
        <section class="aside-section">
            <h2 id="title4">图书分类</h2>
          <ul>
              <li><a href="category.html">编程语言</a></li>
              <li><a href="category.html">数据库</a></li>
              <li><a href="category.html">图像图形</a></li>
              <li><a href="category.html">网页制作</a></li>
              <li><a href="category.html">考试认证</a></li>
          </ul>
        </section><!--合作伙伴--><section class="aside-section">
            <h2 id="title5">合作伙伴</h2>
            <ul>
                <li><a href="#">中国电子商务研究中心</a></li>
                <li><a href="#">清华大学出版社</a></li>
                <li><a href="#">中国人民大学出版社</a></li>
                <li><a href="#">中国社会科学出版社</a></li>
            </ul>
        </section>
        <div class="border"><img src="../sourcebook/border.gif" alt="分隔线"></div>
        <!--关于书店-->
        <section class="about">
            <h2 id="title6">关于书店</h2>
            <img src="../sourcebook/about.gif" alt="叮叮书店"/><p>叮叮书店成立于2010年6月，是由教育部主管、清华大学主办的综合的出版单位</p>
        </section>
    </aside>
</div>
<!--页脚-->
<div id="footer-wrapper">
    <!--页脚导航-->
    <footer class="container">
        <section>
            <a href="index.html">首页</a> <a href="about.html">关于我们</a> <a href="#">服务条款</a> <a href="#">隐私策略</a> <a href="contact.html">联系我们</a>
        </section>
    </footer>
</div>
<!--版权-->
<section id="copyright" class="container">
    Copyright (c)<a href="index.html">叮叮书店</a> 2016-2018 All Rights Reserved
    <address>通信地址：四川旅游学院教学楼c栋
        教师办公室电话：010-16898915
        信箱：44781682@qq.com
    </address>
</section><!--container是取了一个名字，相当于 一组属性的容器，
就是类，而id只能定义一个-->
</body>
</html>